<template>
<view class="help">
	<view style="height: 170upx; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
		<view class="topnav" :class="{ active: active == 1 }" @click="active = 1" style="margin-left: 24upx;">常见问题</view>
		<button open-type="contact" class="topnav" style="margin-right: 24upx;">		
			<view>在线客服</view>
		</button>
	</view>
	<!-- <view class="blank" v-if="active == 1">
		<view style="height: 120upx; width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center;">
			<view class="blankTop" :class="{ active: bl	ankActive == 1 }" @click="blankActive = 1" style="margin-left: 155upx;">借</view>
			<view class="blankTop" :class="{ active: blankActive == 2 }" @click="blankActive = 2" style="margin-right: 155upx;">还</view>
		</view>
		<image v-if="blankActive == 1" src="../../static/jie.png" style="width: 443upx; height: 638upx;"></image>
		<image v-else src="../../static/huan.png" style="width: 396upx; height: 638upx;"></image>
	</view> -->
	<view>
		<view class="blankItem">
			<view class="itemTitle">使用问题</view>
			<view class="itemSub">没有取到充电宝</view>
			<view style="width: 100%; height: 2upx; background: #eeeeee;"></view>
			<view class="itemContent">可下拉刷新并查询“我的订单”的当前订单状态：若订单已完成或已取消，可重新扫码使用；若订单未完成，可联系门店工作人员处理，反馈至人工客服核实。</view>
			<view class="itemSub">充电宝无法充电</view>
			<view style="width: 100%; height: 2upx; background: #eeeeee;"></view>
			<view class="itemContent">若充电宝无法充电，请归还至柜机内重新扫码使用。</view>
		</view>
		
		<view class="blankItem">
			<view class="itemTitle">归还问题</view>
			<view class="itemSub">归还后订单未结束</view>
			<view style="width: 100%; height: 2upx; background: #eeeeee;"></view>
			<view class="itemContent">请确认充电宝已锁住且不可再取出，下拉刷新并查看“我的订单”的当前订单状态：若订单已完成，即已归还成功；若订单未完成可联系门店工作人员处理，反馈至人工客服核实。</view>
			<view class="itemSub">无法归还</view>
			<view style="width: 100%; height: 2upx; background: #eeeeee;"></view>
			<view class="itemContent">可点击首页「附近门店」查看附近可归还的门店及地址；充电宝支持异地通用通还，可跨城市、跨门店任意选择归还地点；若特殊原因导致无法归还，可联系人工客服核实处理。</view>
		</view>
		
		<view class="blankItem">
			<view class="itemTitle">支付问题</view>
			<view class="itemSub">订单如何支付</view>
			<view style="width: 100%; height: 2upx; background: #eeeeee;"></view>
			<view class="itemContent">请确保第三方账户余额充足，订单将会自动代扣完成支付；若未代扣成功，可点击“个人中心-我的订单”或进入第三方守约记录查看并支付代付款订单。</view>
		</view>
		
		<view class="blankItem">
			<view class="itemTitle">费用问题</view>
			<view class="itemSub">订单收费标准</view>
			<view style="width: 100%; height: 2upx; background: #eeeeee;"></view>
			<view class="itemContent">可进入“个人中心-我的订单”，点击查看订单详情及收费标准。</view>
			<view class="itemSub">对订单费用有疑问</view>
			<view style="width: 100%; height: 2upx; background: #eeeeee;"></view>
			<view class="itemContent">可进入“个人中心-我的订单”点击查看订单详情及收费标准；若对费用有疑问，可联系人工客服进行处理。</view>
		</view>
	</view>
	
	<view style="height: 40upx; line-height: 40upx; margin-top: 15upx; margin-bottom: 25upx; text-align: center;" @click="callPhone">
		<text style="font-size: 24upx; color: #989898;">客服热线电话：</text>
		<text style="font-size: 24upx; color: #ef6e2a;">400-003-9881</text>
	</view>
</view>
</template>

<script>
	export default {
		data() {
			return {
				active: 1,
				blankActive: 1,
			}
		},
		methods: {
			callPhone() {
				uni.makePhoneCall({ phoneNumber: '400-003-9881' });
			}
		},
		onLoad() {}
	}
</script>

<style>
.help {
	height: 100vh;
	background: #fff;
	overflow: auto;
	background: #f7f7f7;
}
.help .topnav {
	width: 340upx;
	height: 110upx;
	line-height: 110upx;
	background-color: #ffffff;
	border-radius: 30upx;	
	text-align: center;
	font-weight: bold;
	font-size: 30upx;
	color: #000;
}
.help .topnav.active {
	width: 340upx;
	height: 110upx;
	line-height: 110upx;
	border-radius: 30upx;	
	text-align: center;
	font-weight: bold;
	font-size: 30upx;
	color: #fff;
	background-image: linear-gradient(209deg, #ef6e2a 0%, #ed7739 50%, #ea7f48 100%), linear-gradient(#ffffff, #ffffff);
	box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33);
}
.help .blank {
	width: 690upx;
	height: auto;
	background: #ffffff;
	box-shadow: 0upx 8upx 31upx 1upx #f1f3f5;
	border-radius: 30upx;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 30upx;
	min-height: calc( 100% - 260upx );
}
.help .blankTop {
	font-size: 50upx;
	color: #000000;
	font-weight: bold;
	box-shadow: 0upx 8upx 31upx 1upx #f1f3f5;
	border-bottom: 2px solid #fff;
	padding-bottom: 3upx;
}
.help .blankTop.active {
	font-size: 50upx;
	color: #ee702e;
	font-weight: bold;
	border-bottom: 2px solid #ee702e;
	padding-bottom: 3upx;
}
.help .blankItem {
	width: 690upx;
	height: auto;
	background: #ffffff;
	box-shadow: 0upx 8upx 31upx 1upx #f1f3f5;
	margin: 0 auto 30upx;
	box-sizing: border-box;
	padding: 20upx;
	border-radius: 30upx;	
}
.help .itemTitle {
	font-size: 28upx;
	color: #ef7738;	
}
.help .itemSub {
	font-size: 22upx;
	color: #58585a;
	line-height: 2;
	margin-top: 10upx;
}
.help .itemContent {
	font-size: 22upx;
	color: #989898;
	line-height: 1.5;
	margin: 10upx 0;
}
</style>
